<template>
  <div class="app-container" style="background-color:#ecf0f5 !important">
    <!-- v-permission="['airQuality:airQualityMonth:read']" -->
    <!-- 查询和其他操作 -->
    <div class="filter-container" style="background-color:#ecf0f5 !important">
      <el-button :style="{ display: visibleSubmit }" class="filter-item" type="primary" icon="el-icon-back" @click="handleFilter(2,null,null)"/>
      <el-date-picker v-model="month" type="date" clearable class="filter-item" placeholder="选择日期"/>
      <el-button class="filter-item" :style="{background:buttonColor.lookup,color:buttonColor.color}" icon="el-icon-search" @click="handleFilter(3,null,null)">查找</el-button>
    </div>
    <div class="list textone">
      <div class="uni-flex uni-row" style="min-height: 2rem;">
        <div class="text1Title">地区</div>
        <div class="text2Title">AQI</div>
        <div class="text2Title">空气类型</div>
        <div class="text2Title">首要污染物</div>
        <div class="text2Title">AQI(环比)</div>
        <div class="text2Title">空气类型</div>
        <div class="text2Title">首要污染物</div>
        <div class="text2Title">AQI(同比)</div>
        <div class="text2Title">空气类型</div>
        <div class="text2Title">首要污染物</div>
      </div>
      <div v-for="(item) in dataList" :key="item.fsiteNo+'_'+1" class="uni-flex uni-row on" @click="handleFilter(1,item.fsiteNo,item.fsiteName)">
        <div class="text1">{{ item.fsiteName != null ? item.fsiteName : item.fpointName }}</div>
        <div class="text2">{{ item.faqi1 }}</div>
        <div class="text2" v-if="item.ftype1==='优'"><el-tag class="tagStyle" effect="dark" size="medium" color='#00e400'>{{ item.ftype1  }}</el-tag> </div>
        <div class="text2" v-else-if="item.ftype1==='良'"><el-tag class="tagStyle" effect="dark" size="medium" color="#f4f410">{{ item.ftype1  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype1==='轻度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#ff7e00">{{ item.ftype1  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype1==='中度'"><el-tag class="tagStyle" effect="dark" size="medium" color="red">{{ item.ftype1  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype1==='重度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#99004c">{{ item.ftype1  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype1==='严重'"><el-tag class="tagStyle" effect="dark" size="medium" color="#7e0023">{{ item.ftype1  }}</el-tag></div>
        <div class="text2" v-else>-</div>
        <div class="text2" v-if="item.fmain1 != null">{{ item.fmain1 }}</div>
        <div class="text2" v-else>-</div>
        <div class="text2">{{ item.faqi2 }}</div>
        <div class="text2" v-if="item.ftype2==='优'"><el-tag class="tagStyle" effect="dark" size="medium" color='#00e400'>{{ item.ftype2  }}</el-tag> </div>
        <div class="text2" v-else-if="item.ftype2==='良'"><el-tag class="tagStyle" effect="dark" size="medium" color="#f4f410">{{ item.ftype2  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype2==='轻度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#ff7e00">{{ item.ftype2  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype2==='中度'"><el-tag class="tagStyle" effect="dark" size="medium" color="red">{{ item.ftype2  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype2==='重度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#99004c">{{ item.ftype2  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype2==='严重'"><el-tag class="tagStyle" effect="dark" size="medium" color="#7e0023">{{ item.ftype2  }}</el-tag></div>
        <div class="text2" v-else>-</div>
        <div class="text2" v-if="item.fmain2 != null">{{ item.fmain2 }}</div>
        <div class="text2" v-else>-</div>
        <div class="text2">{{ item.faqi3 }}</div>
        <div class="text2" v-if="item.ftype3==='优'"><el-tag class="tagStyle" effect="dark" size="medium" color='#00e400'>{{ item.ftype3  }}</el-tag> </div>
        <div class="text2" v-else-if="item.ftype3==='良'"><el-tag class="tagStyle" effect="dark" size="medium" color="#f4f410">{{ item.ftype3  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype3==='轻度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#ff7e00">{{ item.ftype3  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype3==='中度'"><el-tag class="tagStyle" effect="dark" size="medium" color="red">{{ item.ftype3  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype3==='重度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#99004c">{{ item.ftype3  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype3==='严重'"><el-tag class="tagStyle" effect="dark" size="medium" color="#7e0023">{{ item.ftype3  }}</el-tag></div>
        <div class="text2" v-else>-</div>
        <div class="text2" v-if="item.fmain3 != null">{{ item.fmain3 }}</div>
        <div class="text2" v-else>-</div>
      </div>

    </div>

    <div>
      <div id="myChartairQualityDay" :style="{width: '100%', height: '250px',backgroundColor:'#fff'}"/>
    </div>

      <h2 align="center">{{ yearMonth }} {{ fsiteName }} 空气情况</h2>
      <div class="list">
      <div class="uni-flex uni-row" style="min-height: 2rem;">
        <div class="text1Title">时间</div>
        <div class="text2Title">AQI</div>
        <div class="text2Title">空气类型</div>
        <div class="text2Title">首要污染物</div>
        <div class="text2Title">AQI(环比)</div>
        <div class="text2Title">空气类型</div>
        <div class="text2Title">首要污染物</div>
        <div class="text2Title">AQI(同比)</div>
        <div class="text2Title">空气类型</div>
        <div class="text2Title">首要污染物</div>
      </div>
      <div v-for="(item) in dataList1" :key="item.fsiteNo+'_'+2" class="uni-flex uni-row on">
        <div class="text1">{{ item.fsiteNo  }}</div>
        <div class="text2">{{ item.faqi1 }}</div>
        <div class="text2" v-if="item.ftype1==='优'"><el-tag class="tagStyle" effect="dark" size="medium" color='#00e400'>{{ item.ftype1  }}</el-tag> </div>
        <div class="text2" v-else-if="item.ftype1==='良'"><el-tag class="tagStyle" effect="dark" size="medium" color="#f4f410">{{ item.ftype1  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype1==='轻度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#ff7e00">{{ item.ftype1  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype1==='中度'"><el-tag class="tagStyle" effect="dark" size="medium" color="red">{{ item.ftype1  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype1==='重度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#99004c">{{ item.ftype1  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype1==='严重'"><el-tag class="tagStyle" effect="dark" size="medium" color="#7e0023">{{ item.ftype1  }}</el-tag></div>
        <div class="text2" v-else>{{ item.ftype1  }}</div>
        <div class="text2">{{ item.fmain1 }}</div>
        <div class="text2">{{ item.faqi2 }}</div>
        <div class="text2" v-if="item.ftype2==='优'"><el-tag class="tagStyle" effect="dark" size="medium" color='#00e400'>{{ item.ftype2  }}</el-tag> </div>
        <div class="text2" v-else-if="item.ftype2==='良'"><el-tag class="tagStyle" effect="dark" size="medium" color="#f4f410">{{ item.ftype2  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype2==='轻度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#ff7e00">{{ item.ftype2  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype2==='中度'"><el-tag class="tagStyle" effect="dark" size="medium" color="red">{{ item.ftype2  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype2==='重度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#99004c">{{ item.ftype2  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype2==='严重'"><el-tag class="tagStyle" effect="dark" size="medium" color="#7e0023">{{ item.ftype2  }}</el-tag></div>
        <div class="text2" v-else>{{ item.ftype2  }}</div>
        <div class="text2">{{ item.fmain2 }}</div>
        <div class="text2">{{ item.faqi3 }}</div>
        <div class="text2" v-if="item.ftype3==='优'"><el-tag class="tagStyle" effect="dark" size="medium" color='#00e400'>{{ item.ftype3  }}</el-tag> </div>
        <div class="text2" v-else-if="item.ftype3==='良'"><el-tag class="tagStyle" effect="dark" size="medium" color="#f4f410">{{ item.ftype3  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype3==='轻度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#ff7e00">{{ item.ftype3  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype3==='中度'"><el-tag class="tagStyle" effect="dark" size="medium" color="red">{{ item.ftype3  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype3==='重度'"><el-tag class="tagStyle" effect="dark" size="medium" color="#99004c">{{ item.ftype3  }}</el-tag></div>
        <div class="text2" v-else-if="item.ftype3==='严重'"><el-tag class="tagStyle" effect="dark" size="medium" color="#7e0023">{{ item.ftype3  }}</el-tag></div>
        <div class="text2" v-else>{{ item.ftype3  }}</div>
        <div class="text2">{{ item.fmain3 }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
import { tableColor,titleColor ,buttonColor} from '@/filters/index'
var fsiteNoList = [];
var fsiteNameList = [];
export default {
  name: 'Area',
  filters: {
    intFielter(type) {
      var types = type.split('.')
      return types[0]
    }
  },
  data() {
    return {
      buttonColor:buttonColor,
      tier: undefined,
      userifo: undefined,
      month: this.beforeDay(),
      fsiteName: '',
      visibleSubmit: 'none',
      dataList: null,
      dataList1: null,
      listQuery: {
        date: undefined,
        fsiteNo: undefined
      }
    }
  },
  computed: {
    yearMonth() {
      var date = new Date(this.month)
      var ym
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()
      if (m < 10) {
        m = '0' + m
      }
      if (d < 10) {
        d = '0' + d
      }
      ym = '' + y + '-' + m + '-' + d
      return ym
    },
    fsizecom() {
      return this.visibleSubmit === 'none' ? 22 : 20
    }
  },
  created() {
    this.userifo = this.$store.state.user
    this.handleFilter(0, this.userifo.fsiteNo, this.userifo.fsiteName)
  },
  methods: {
    handleFilter: function(ffrom, fsiteNo, fsiteName) { // ffrom 0：刚进页面，1：进入行，2：返回，3：查询
      // ffrom 0：刚进页面，1：进入行，2：返回，3：查询
      if (ffrom === 0) {
        // 刚进页面
        this.tier = 1;
        this.visibleSubmit = "none";
        // 赋予层对应的fsite
        fsiteNoList[this.userifo.fsiteLevel + this.tier] = fsiteNo;
        fsiteNameList[this.userifo.fsiteLevel + this.tier] = fsiteName;
        this.listQuery.fsiteNo = fsiteNo;
        this.fsiteName = fsiteName;
      } else if (ffrom === 1) {
        // 进入行
        this.tier += 1;
        this.visibleSubmit = "";
        // 赋予层对应的fsite
        fsiteNoList[this.userifo.fsiteLevel + this.tier] = fsiteNo;
        fsiteNameList[this.userifo.fsiteLevel + this.tier] = fsiteName;
          this.listQuery.fsiteNo = fsiteNo;
          this.fsiteName = fsiteName;
      } else if (ffrom === 2) {
        // 返回
        this.tier -= 1;
        if (this.tier === 1) {
          this.visibleSubmit = "none";
        }
        this.listQuery.fsiteNo =
          fsiteNoList[this.userifo.fsiteLevel + this.tier];
        this.fsiteName = fsiteNameList[this.userifo.fsiteLevel + this.tier];
      }
      this.listQuery.date = this.yearMonth;
      listAir(this.listQuery)
        .then(response => {
          this.dataList = response.data.data.list
        })
        .catch(() => {
          this.dataList = []
        })
      listAirLine(this.listQuery)
        .then(response => {
          this.dataList1 = response.data.data.list
          const categories = response.data.data.list.map(function(item) {
            return item.fsiteNo
          })
          const datas = []
          const faqi1 = []
          const faqi2 = []
          const faqi3 = []

           response.data.data.list.map(item=> {
            faqi1.push(item.faqi1)
            faqi2.push(item.faqi2)
            faqi3.push(item.faqi3)
          })

            datas.push({
            name: '今年',
            type: 'line',
            lineStyle: {
                normal: {
                      width:4
                }
            },
            data: faqi1,
            itemStyle : { normal: {label : {show: true}}}
            })
            datas.push({
              name: '同比',
            type: 'line',
            lineStyle: {
                normal: {
                      width:4
                }
            },
            data: faqi3,
            itemStyle : { normal: {label : {show: true}}}
            })
            datas.push({
              name: '环比',
            type: 'line',
             lineStyle: {
                normal: {
                      width:4
                }
            },
            data: faqi2,
            itemStyle : { normal: {label : {show: true}}}
            })
          this.showChartPie(categories, datas)
        })
        .catch(() => {
          this.categories = []
          this.datas = []
        })
    },
    showChartPie(categories, datas) {
      // 基于准备好的dom，初始化echarts实例
      const myChartairQualityDay = this.$echarts.init(document.getElementById('myChartairQualityDay'))
      // 绘制图表
      myChartairQualityDay.setOption({
        title: {
          text:  this.yearMonth+this.fsiteName + 'AQI',
          left: 'center',
           textStyle:{
      　　　　 fontSize:24
          }
        },
        color:['#4472C5','#ED7C30','#80FF80','#FF8096','#800080'],
        legend: {
          data: ['今年','同比','环比'],
          top:'40%',
          left:'90%',
          textStyle: {
            //图例文字的样式
            fontSize: 18,
            fontWeight:'bold'
          },
          orient: 'vertical'
          },
          grid: {
        left: '10%',
        right: '10%',
        bottom: '3%',
        containLabel: true
    },
        xAxis: {
          type: 'category',
          data: categories,
            axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        yAxis: {
          type: 'value',
           axisLabel: {
            show: true,
              textStyle: {
                fontSize : 16  ,   //更改坐标轴文字大小
              }
         },
        },
        series: datas,
        tooltip: {
          trigger: 'axis'
        }
      })
    },
    beforeDay() {
       var yy = new Date() - 1000 * 60 * 60 * 24;
      return new Date(yy);
    }
  }
}
export function listAir(query) {
  return request({
    url: '/report/airreport001',
    method: 'get',
    params: query
  })
}
export function listAirLine(query) {
  return request({
    url: '/report/airreport002',
    method: 'get',
    params: query
  })
}
</script>

<style scoped>
.tagStyle{
  border-radius:10px;
  width:60px;
  font-size:15px;
  color: #fff;
  font-weight: 900;
}

.text1Title {
    width: 600px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
    border-top: 3px solid #409EFF;
    background-color: #fff !important;
  }

  .text2Title {
    width: 350px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
    border-top: 3px solid #409EFF;
    background-color: #fff !important;
  }
  .text1 {
    width: 600px;
    color: #000000;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
  }

  .text2 {
    width: 350px;
    color: #000000;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f7f7f7;
  }
  .on {
    background: #fff;
  }

  .list {
    background-color:#ecf0f5 !important;
    padding-bottom: 30px;
    box-sizing: border-box;
    flex: 1;
    flex-direction: column;
    display: flex;
    padding-top: 10px;
    height: 30%;
    flex: 2;
    text-align: left;
  }
  .uni-row {
    flex-direction: row;
  }
  .uni-flex {
    display: flex;
    flex-direction: row;
  }
   .list>div:hover{
    background-color: #f4f4f4;
  }
  .list.textone>div:nth-child(2){background-color:#eaeaea;pointer-events: none;}
</style>
